//导入   import from
import Vue from 'vue'
import App from './App.vue'
///router/index.js
import router from './router'
//vuex/index.js
import store from './vuex'


/////////////////////////////////////////////////////////////////////////////////////

// 导入进度条插件  ，先安装 cnpm install --save nprogress
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'


/////////////////////////////////////////////////////////////////////////////////////

//qs是查询字符串解析和将对象序列化的库
import qs from "qs"
//挂载 this.$qs  
Vue.prototype.$qs=qs;

/////////////////////////////////////////////////////////////////////////////////////

// 导入 自定义全局 css  
import './assets/css/global.css'

// 导入 自定义全局 js
import gs from './assets/js/global.js'

//挂载到vue属性上 this.$gs.方法
Vue.prototype.$gs=gs
 

/////////////////////////////////////////////////////////////////////////////////////

// 布局，导入ElementUI  ,JS/CSS    先安装 cnpm i element-ui -S
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

//使用Vue.use注册插件
Vue.use(ElementUI)


/////////////////////////////////////////////////////////////////////////////////////

//数据请求，导入axios，先安装   cnpm install axios   
import axios from 'axios'

//设置后端API路径
//baseURL:'http://localhost:8082/'
axios.defaults.baseURL = store.state.baseURL


/////////////////////////////axios 请求前设置,带上token
axios.defaults.timeout = 30000;         //超时时间
axios.defaults.withCredentials = true;   //
//每次请求，带上token
axios.interceptors.request.use(config => {
   // 当进入request拦截器，表示发送了请求，我们就开启进度条
   NProgress.start()


  // 登录授权 请求验证是否有token  需要授权的 API ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌
  config.headers.Authorization = store.state.token


  return config // 必须返回否则没有值
})

// 在response拦截器中，隐藏进度条
axios.interceptors.response.use(config => {
  // 当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})



//挂载到vue原型，相当于vue实例多了一个属性 $http，可以使用this.$http
Vue.prototype.$http = axios

/////////////////////////////////////////////////////////////////////////////////////

// 富文本编辑器
// 1.导入之前先安装 ，切换到本项目下，        
//cnpm install --save vue-quill-editor  安装到node_modules
 
// 2.导入富文本编辑器 js/css
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'


// 3. 将富文本编辑器，注册为全局可用的插件
Vue.use(VueQuillEditor)

/////////////////////////////////////////////////////////////////////////////////////
// vue-table-with-tree-grid  树形组件，单独导入  ，
//先安装  cnpm install --save vue-table-with-tree-grid
//https://www.npmjs.com/package/vue-table-with-tree-grid
import TreeTable  from 'vue-table-with-tree-grid'

//注册树形组件 使用 <tree-table>
Vue.component('tree-table', TreeTable)


/////////////////////////////////////////////////////////////////////////////////////

//cnpm install  vue-json-editor --save

import vueJsonEditor from 'vue-json-editor'

Vue.component('vue-json-editor', vueJsonEditor)

/////////////////////////////////////////////////////////////////////////////////////
 
//引入echarts
import * as echarts from 'echarts'

//挂载 this.$echarts
Vue.prototype.$echarts = echarts


/////////////////////////////////////////////////////////////////////////////////////

Vue.config.productionTip = false

//new vue实例
new Vue({
  router,   //路由   router：router
  store,     //状态   注入
  render: h => h(App)     //render ，将APP.vue作为模板渲染过来，APP.vue是根Vue,在它的router-view里假期其他vue
}).$mount('#app')       //vue页面挂载到#app这个div
